import React, { useState, useEffect } from "react";
import "./style.scss";
import Banner from "@views/viewCommon/Banner";
import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";
import { Toast } from "antd-mobile";
import MainLayout from "@component/mainLayout/mainLayout";
import CouponItem from "@views/viewCommon/CouponItem";
function CollectCouponCenter(props) {
	const [bannerList_top, set_bannerList_top] = useState([]);
	const [couponCenterList, set_couponCenterList] = useState([]);

	/*******************业务方法 start************************/

	/**
	 * @msg: 查询满足自定义banner
	 * @param {*}
	 * @return {*}
	 */
	function customBanner_queryMeetCustomBanner() {
		return new Promise((resolve, reject) => {
			const params = {
				url: InterfaceG.customBanner_queryMeetCustomBanner,
				params: {
					productCode: "601",
					sourceCode: "coupon_center"
				}
			};
			yhTools.request(params).then(res => {
				resolve();
				if (res.code === "0") {
					const { data } = res;
					data &&
						data.length > 0 &&
						data.map(v => {
							switch (v.positionCode) {
								case "coupon_center_top":
									set_bannerList_top(v.meetBannerImgRespList);
									break;
								default:
									break;
							}
						});
				} else {
					Toast.info(res.message, 2);
				}
			});
		});
	}

	/**
	 * @msg:获取可领卡券
	 * @param {*}
	 * @return {*}
	 */
	function getMyCouponList(load) {
		return new Promise((resolve, reject) => {
			const params = {
				url: InterfaceG.myCouponCenter
			};
			yhTools.request(params).then(res => {
				if (load) {
					Toast.hide();
				}
				resolve();
				if (res.code === "0") {
					set_couponCenterList(res.data.couponCenterList);
				} else {
					Toast.info(res.message, 2);
				}
			});
		});
	}

	/**
	 * @msg:初始化页面数据
	 * @param {*}
	 * @return {*}
	 */
	function initData() {
		Toast.loading("加载中", 100);
		let p_customBanner_queryMeetCustomBanner = customBanner_queryMeetCustomBanner();
		let p_getMyCouponList = getMyCouponList();
		Promise.all([
			p_customBanner_queryMeetCustomBanner,
			p_getMyCouponList
		]).finally(() => {
			Toast.hide();
		});
	}

	/*******************业务方法 end************************/

	useEffect(() => {
		initData();
	}, []);

	/*******************点击事件 start************************/

	/**
	 * @msg: 立即领取
	 * @param {*} i //索引
	 * @return {*}
	 */
	const receive = i => {
		let no = couponCenterList[i].no;
		const params = {
			url: InterfaceG.drawCoupon,
			params: {
				no
			}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(params).then(res => {
			Toast.hide();
			if (res.code === "0") {
				if (res.data.xhfOpenStatus === "0") {
					//未开通
					Toast.info("领取成功，开通小辉付即可使用", 2);
					setTimeout(() => {
						props.history.push("/xhfHomeNoCredit");
					}, 2000);
				} else {
					//开通
					Toast.info("领取成功，请至我的卡券页面查看", 2);
					setTimeout(() => {
						Toast.loading("加载中...", 100);
						getMyCouponList(true);
					}, 2000);
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	};

	/*******************点击事件 end************************/
	let _pageParams = {
		header: {
			title: "领券中心",
			headerBackground: "#fff",
			titleColor: "#232323",
			newBackButt: true
		},
		history: props.history,
		cacheLifecycles: props.cacheLifecycles
	};
	return (
		<MainLayout pageParams={_pageParams}>
			<div className="page-collectCouponCenter">
				<Banner bannerList={bannerList_top} history={props.history} />
				{/*券列表 */}
				<div className="collectCouponCenter-list">
					{couponCenterList &&
						couponCenterList.length > 0 &&
						couponCenterList.map((v, i, a) => {
							return (
								<CouponItem
									styleType={
										v.couponTypeNo === "01" || v.couponTypeNo === "02"
											? "1"
											: "2"
									}
									couponStatus={"2"}
									key={`${v.couponName}${i}`}
									item={v}
									index={i}
									couponArray={a}
									receive={() => {
										receive(i);
									}}
								/>
							);
						})}
				</div>
				<div className="collectCouponCenter-more f-24 c-999">
					- 已经看完了，没有更多了-
				</div>
				<div
					className="collectCouponCenter-btn f-32 f-b"
					onClick={() => {
						props.history.push({
							pathname: "/paymentDiscount/coupon"
						});
					}}
				>
					查看已领取的券
				</div>
			</div>
		</MainLayout>
	);
}

export default CollectCouponCenter;
